<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span>登记入库</span>
          </div>
          <div class="save_button">
            <div v-if="review" class="buttonBox">
              <el-button type="success" icon="el-icon-check" size="mini" @click="reviewSuccess">通过</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-back" size="mini" @click="goBack">返回</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-checked" size="mini" @click="save">保存</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-remove" size="mini" @click="confirmDel">删除</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-form ref="form" :model="data" :inline="true" :rules="formRules">
          <el-input v-model="data.id" type="hidden" />
          <el-row :gutter="10">
            <el-col :xl="3" :lg="3" :md="4" :sm="5">
              <el-form-item prop="coding">
                <div>编号</div>
                <el-input v-model="data.coding" size="mini" :disabled="alreadyReview" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="3" :md="4" :sm="5">
              <el-form-item prop="name">
                <div>名称</div>
                <el-input v-model="data.name" size="mini" :disabled="alreadyReview" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="3" :md="4" :sm="5">
              <el-form-item prop="status">
                <div>状态</div>
                <el-select v-model="data.status" size="mini" disabled>
                  <el-option v-for="(item, indexStatus) in enterStatus" :key="indexStatus" :value="indexStatus" :label="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="3" :md="4" :sm="5">
              <el-form-item prop="store_id">
                <div>仓库</div>
                <v-select v-model="data.store_id" action="storeList" :query="{kind: 0}" :disabled="alreadyReview" />
              </el-form-item>
            </el-col>
            <div v-if="data.verify_admin">
              <el-col :xl="3" :lg="3" :md="4" :sm="5">
                <el-form-item>
                  <div>验证人员</div>
                  <el-input v-model="data.verify_admin.name" :disabled="true" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="3" :md="4" :sm="5">
                <el-form-item>
                  <div>验证时间</div>
                  <el-date-picker v-model="data.verify_date" type="date" size="mini" :disabled="true" />
                </el-form-item>
              </el-col>
            </div>
            <el-col :xl="3" :lg="3" :md="4" :sm="5">
              <el-form-item prop="type">
                <div>来源</div>
                <el-select v-model="data.type" placeholder="请选择" size="mini" disabled>
                  <el-option v-for="(item, indexType) in fromType" :key="indexType" :label="item" :value="indexType" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="3" :md="4" :sm="5">
              <el-form-item prop="sort">
                <div>排序</div>
                <el-input v-model="data.sort" size="mini" />
              </el-form-item>
            </el-col>
            <el-col v-if="data.status === 0" :xl="3" :lg="3" :md="4" :sm="5">
              <el-form-item>
                <div v-if="data.type === 0">选择订单</div>
                <div v-else>选择备件</div>
                <el-button v-if="data.status === 0" type="primary" size="mini" @click="drawer = true">选择</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-tabs>
          <el-tab-pane label="详细">
            <el-table :data="list">
              <el-table-column prop="orders.name" label="采购订单" min-width="8%" />
              <el-table-column label="备件-品牌-型号" min-width="16%">
                <template slot-scope="scope">
                  <div v-if="scope.row.parts">
                    {{ scope.row.parts.name }}<br>{{ scope.row.parts.brand }}<br>{{ scope.row.parts.spec }}
                  </div>
                  <div v-else>
                    该备件已被删除
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="providers.name" label="供应商" min-width="8%" />
              <el-table-column prop="parts.unit" label="单位" min-width="5%" />
              <el-table-column prop="number" label="入库数量" min-width="7%" />
              <el-table-column prop="price" label="采购单价" min-width="8%" />
              <el-table-column prop="total_price" label="合计" min-width="8%" />
              <el-table-column prop="need_number" label="提报数量" min-width="8%" />
              <el-table-column prop="orders.admin.department.name" label="提报单位" min-width="8%" />
              <el-table-column prop="orders.admin.true_name" label="提报人" min-width="6%" />
              <el-table-column label="验收人" min-width="6%">
                <template v-slot="scope">
                  <div v-for="(item, adminIndex) in scope.row.approve_admins" :key="adminIndex">
                    <span v-if="item.status === 0" style="color: blue; cursor: pointer;" @click="approveAdmin(item.id)">
                      {{ item.admin.true_name }}
                    </span>
                    <span v-else-if="item.status === 1">
                      {{ item.admin.true_name }}
                    </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作" align="center" min-width="4">
                <template scope="scope">
                  <el-button v-if="scope.row.status === 0 && reviewParts" type="text" size="small">待验收</el-button>
                  <el-button v-if="scope.row.status === 1" type="text" size="small" style="color: green">已验收</el-button>
                  <el-button v-if="data.status === 0" type="text" size="small" @click="remove(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="描述">
            <el-row :gutter="10">
              <el-col :span="4">
                <div>
                  <span>创建时间日期</span>
                  <el-input v-model="data.create_time" placeholder="创建时间日期" class="mtb10" size="mini" :disabled="true" />
                </div>
                <div>
                  <span>创建人</span>
                  <el-input v-model="data.cr_admin.name" placeholder="创建人" class="mtb10" size="mini" :disabled="true" />
                </div>
                <div v-if="data.update_time">
                  <div>
                    <span>最近更新</span>
                    <el-input v-model="data.update_time" placeholder="最近更新" class="mtb10" size="mini" :disabled="true" />
                  </div>
                  <div>
                    <span>更新者</span>
                    <el-input v-model="data.up_admin.name" placeholder="更新者" class="mtb10" size="mini" :disabled="true" />
                  </div>
                </div>
              </el-col>
              <el-col :span="20">
                <Tinymce id="content" v-model="data.content" />
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
    <el-drawer title="选择吧" :visible.sync="drawer" :direction="direction" :with-header="false" size="40%">
      <div class="choose-order">
        <el-form ref="parts_form" :model="order" :inline="true" class="hf_form append_other_admin" :rules="partsRules">
          <el-input v-model="data.id" type="hidden" />
          <el-row>
            <el-col v-if="data.type === 0" :span="12">
              <el-form-item prop="order_id">
                <div>采购订单</div>
                <v-select v-model="order.order_id" action="orderList" :query="{kind:1, status: 1}" @input="getParts" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="part_id">
                <div>备件</div>
                <v-select v-if="data.type === 0" v-model="order.part_id" action="partsList" :disabled="!order.order_id && data.type === 0" :query="{order_id:order.order_id}" />
                <v-select-s v-else v-model="order.part_id" action="partsList" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="data.type === 0">
            <el-col :span="12">
              <el-form-item prop="provider_id">
                <div>供应商</div>
                <v-select v-model="order.provider_id" action="providerList" :disabled="!order.part_id" :query="{parts_id:order.part_id}" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="number">
                <div>数字</div>
                <el-input v-model="order.number" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="cg">
            <el-col :span="12">
              <el-form-item prop="price">
                <div>价格</div>
                <el-input v-model="order.price" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-button icon="el-icon-upload2" size="mini" @click="append" />
          </el-row>
        </el-form>
        <el-table v-if="data.type === 0" :data="orderParts">
          <el-table-column label="采购物品" min-width="45%">
            <template scope="scope">
              <div v-if="scope.row.parts">
                {{ scope.row.parts.name }} - {{ scope.row.parts.spec }}
              </div>
              <div v-else>
                该备件已被删除
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="数量" min-width="15%" />
          <el-table-column prop="need_number" label="还需数量" min-width="20%" />
          <el-table-column prop="status" label="进展" min-width="20%">
            <template scope="scope">
              <span v-if="scope.row.status === 0" style="color: gray">待入库</span>
              <span v-if="scope.row.status === 1" style="color: green">已入库</span>
              <span v-if="scope.row.status === 2" style="color: #c7c432">部分入库</span>
            </template>
          </el-table-column>
        </el-table>
        <!--因为删除了采购单中的供应商，所以这里不能批量入库-->
        <div v-if="appendAllParts" class="mt20" hidden>
          <el-button type="primary" icon="el-icon-check" size="mini" @click="appendAll">全部入库</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import API from '@/api/stock/enter'
import VSelect from '@/components/select'
import VSelectS from '@/components/select-search'
import Tinymce from '@/components/Tinymce/index'
import { enterStatus, fromType } from '@/utils/options'
import { mapGetters } from 'vuex'
export default {
  inject: ['backUrl', 'delOne', 'update', 'appendParts', 'removeParts', 'goUrl'],
  components: {
    VSelect,
    VSelectS,
    Tinymce
  },
  data() {
    return {
      data: {
        'cr_admin': {
          'name': ''
        },
        'verify_admin': {
          'name': ''
        }
      },
      list: [],
      order: {},
      orderParts: [],
      enterStatus,
      fromType,
      review: false,
      appendAllParts: false,
      alreadyReview: false,
      reviewParts: false,
      drawer: false,
      cg: false,
      direction: 'rtl',
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入入库单名称',
            trigger: 'blur'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        store_id: [
          {
            required: true,
            message: '请选择仓库',
            trigger: 'change'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择来源',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      },
      partsRules: {
        order_id: [
          {
            required: true,
            message: '请选择采购单',
            trigger: 'change'
          }
        ],
        part_id: [
          {
            required: true,
            message: '请选择备件',
            trigger: 'change'
          }
        ],
        provider_id: [
          {
            required: true,
            message: '请选择供应商',
            trigger: 'change'
          }
        ],
        number: [
          {
            required: true,
            message: '请输入入库数量',
            trigger: 'blur'
          }
        ],
        price: [
          {
            required: true,
            message: '请输入采购单价',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    this.index()
  },
  methods: {
    index() {
      const id = this.$route.params.id
      const thisRole = this.roles[0]
      API.getOne(id).then(response => {
        console.log(response)
        if (response.data.error_code === 46404) {
          this.$alert('您请求的入库单不存在', '错误', {
            confirmButtonText: '确定',
            callback: () => {
              this.backUrl()
            }
          })
        }
        this.data = response.data
        this.list = response.data.parts_list
        if (response.data.status === 1 || response.data.status === 2) {
          this.alreadyReview = true
        }
        // 采购的就是采购申请中指定的工程师可以审核
        let reviewPartAbility = 0
        if (response.data.type === 0) {
          if (response.data.parts_list[0]) {
            reviewPartAbility = response.data.parts_list[0].orders.orders_details[0].purrqs.review_id
          }
          if (this.roles.includes(16) || this.roles.includes(reviewPartAbility)) {
            this.reviewParts = true
          }
          this.appendAllParts = true
        } else {
          // 非采购则所有工程师都可以审核
          const engineer = [106, 107, 108, 109, 110, 111, 119, 120, 121, 16]
          if (engineer.includes(thisRole)) {
            this.reviewParts = true
          }
        }
        // 备件管理审核
        const parts = [114, 16]
        if (parts.includes(thisRole) && response.data.status === 0) {
          this.review = true
        }
        if (response.data.type === 0) {
          this.cg = true
        }
      })
    },
    confirmDel() {
      const id = this.data.id
      this.delOne(API, id, true)
    },
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.update(API, thisData, thisForm)
    },
    append() {
      const thisForm = this.$refs.parts_form
      const parts_data = {
        'order_id': this.order.order_id,
        'part_id': this.order.part_id,
        'provider_id': this.order.provider_id,
        'number': this.order.number,
        'price': this.order.price,
        'enter_id': this.$route.params.id
      }
      const errorCode = 46004
      const errorMessage = '该备件已存在'
      this.appendParts(API, thisForm, parts_data, errorCode, errorMessage)
    },
    remove(id) {
      const parts_data = {
        'id': id
      }
      this.removeParts(API, id, parts_data)
    },
    getParts() {
      const id = this.order.order_id
      if (id) {
        API.getOrder(id).then(response => {
          if (response.data.error_code === 52404) {
            this.$alert('您请求的采购单不存在', '错误', {
              confirmButtonText: '确定',
              callback: () => {
                this.backUrl()
              }
            })
          }
          this.orderParts = response.data.order_part
        })
      }
    },
    edit(id) {
      const parts_data = {
        'id': id,
        'status': 1
      }
      API.editPart(parts_data).then(response => {
        if (response.data.error_code === 52404) {
          this.$alert('您请求的采购单不存在', '错误', {
            confirmButtonText: '确定',
            callback: () => {
              this.backUrl()
            }
          })
        }
        if (response.data.error_code === 1) {
          this.index()
        }
      })
    },
    reviewSuccess() {
      const reviewData = {
        'status': 1,
        'content': this.data.content,
        'id': this.data.id
      }
      API.review(reviewData).then(response => {
        if (response.data.error_code === 1) {
          this.$message.success('入库完成！')
          this.backUrl()
        } else {
          this.$message.error(response.data.message)
        }
      })
    },
    appendAll() {
      const id = this.order.order_id
      if (id) {
        const appendAllData = {
          'id': id,
          'enter_id': this.$route.params.id
        }
        API.appendAll(appendAllData).then(response => {
          console.log(response)
          if (response.data.error_code === 1) {
            this.$message.success('入库成功')
            this.index()
          } else {
            this.$message.error(response.data.message)
          }
        })
      } else {
        this.$message.error('请选择采购订单')
      }
    },
    goBack() {
      this.goUrl('/stock/enter')
    },
    approveAdmin(id) {
      console.log(id)
      API.adminApprove({ id: id }).then(res => {
        if (res.data.error_code === 1) {
          this.$message.success('验收成功')
          this.index()
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style>
.choose-order{
  width: 90%;
  margin: 20px auto;
}
.mt20{
  margin-top: 20px;
}
</style>
